<template>
    
    <!-- 组件的模板 -->
    <empty :msg.sync="message" :show-empty="showEmpty"></empty>
     <div class="page" v-show="!showEmpty">
        <div class="mod-user com-border-bottom" v-if="!isMine" @click="toProjectMemberDetail">
            <a href="javascript:;">
                <div class="avatar-box">
                    <img v-if="extra_info.logo.thumb_url" class="avatar" :src="extra_info.logo.thumb_url">
                    <img v-else class="avatar" src="../../static/imgs/avatar.png">
                    <span class="cover" v-if="status_id == -1">已离职</span>
                </div>
                <div class="info">
                    <p class="name">{{extra_info.name}}</p>
                    <p class="team">{{extra_info.group_name}}</p>
                </div>
            </a>
        </div>
        <div class="process">             
            <div class="module" v-for="attendance in attendance_list">
                <span class="bg_sprite" :class="{'state state_2':attendance.statusClass==2,'state state_3':attendance.statusClass==3,'state state_1':attendance.statusClass==1}"></span>
                <span class="line"></span>
                <div class="wrap">
                    <div class="top"> 
                        <span class="title" v-if="attendance.type == 1">上班 {{attendance.require_time}}</span>
                        <span class="title" v-if="attendance.type == 2">下班 {{attendance.require_time}}</span>
                        <template v-for="item in attendance.status">
                            <span :class="{'tag tag_2':attendance.statusClass==2,'tag tag_3':attendance.statusClass==3}">{{item.name}}</span>
                        </template>
                        <div class="fr" >
                            <span v-if="attendance.attend_time" class="time">{{attendance.attend_time}}</span>
                            <a v-if="changePermission&&attendance.status.length>0&&attendance.status[0].value==6" @click="resetToNormal(attendance)">改为正常</a>
                        </div>
                    </div>
                    <template v-if="attendance.attendance_id">
                         <p class="location" v-if="attendance.position" @click="toPositionMap(attendance.attendance_id)">
                            <span class="bg_sprite icon-location"></span>{{attendance.position}}
                        </p>
                        <div class="pic-wrap" v-if="attendance.photo.length||(changePermission&&attendance.status[0].value!=6&&attendance.statusClass==3)">
                            <ul class="pic-list" v-if="attendance.photo.length">
                                <li v-for="photoItem in attendance.photo" track-by="$index">
                                    <img :src="photoItem.thumb_url" alt="" v-if="$index<2" @click="picPreview($index,attendance.photo)">
                                    <div class="mask" v-if="$index==1" @click="picPreview($index,attendance.photo)"><span></span><span></span><span></span></div>
                                </li>
                            </ul>
                            <a class="link" v-if="changePermission&&attendance.status[0].value!=6&&attendance.statusClass==3" @click="resetToNormal(attendance)">改为正常</a>
                        </div>
                        <div class="remark" v-if="attendance.remark"><em>备注</em>{{attendance.remark}}</div>
                        <div class="remark tip" v-show="attendance.actionText">
                            {{attendance.actionText}}
                        </div>
                    </template>
                  
                </div>
            </div>                        
        </div>        
    </div>
</template>

<script>
    let pageDate ={}
    
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import widget from 'gapi/widget'
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import Empty from 'components/Empty/Empty'
    import clientUi from 'gapi/clientUi'


    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                status_id:'',
                taskID:'',
                isMine: true,
                extra_info:{},
                attendance_list: [],
                permission:[],
                showEmpty:false,
                message:'',
                teamID:'',
                projectID:'',
                userID:''
            }
        },
        computed:{
            changePermission(){
                let boo = false
                this.permission.forEach((item)=>{
                    if(item.id_name=='attendance_status_change'){
                        boo = true
                    }
                })
                return boo
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                pageDate.user_id  = util.getUrddataString('user_id')
                pageDate.date  = util.getUrddataString('date')
                pageDate.project_id = util.getUrddataString('project_id')
                pageDate.team_id = util.getUrddataString('team_id')
                this.isMine  = util.getUrddataString('is_mine')
                this.taskID  = util.getUrddataString('task_id')
                console.log('task_id'+this.taskID)
                document.title = this.isMine ? '个人考勤详情' : '员工考勤详情'
                cache.getCache('KqCacheMessge',(data)=>{
                    if(data){
                        pageDate.project_id = data.project_id || util.getUrddataString('project_id')
                        pageDate.team_id = data.team_id || util.getUrddataString('team_id')
                    }else{
                        pageDate.project_id = util.getUrddataString('project_id')
                        pageDate.team_id = util.getUrddataString('team_id')
                    }
                    this.getDate()
                    cache.getMemoryCache('kqPermission',(data)=>{
                        if(data){
                            this.permission = data.data
                        }else{
                            this.getPermission()
                        }
                    })
                })
               
               this.getUserInfoData()

            },
            getUserInfoData (){
                let datas = {
                    team_id: pageDate.team_id,
                    project_id: pageDate.project_id,
                    user_id: pageDate.user_id,
                    filter:''
                }
                console.log(datas)
                util.ajax({
                    url: '/group/member_info',
                    data: datas,
                    success: (res) => {
                        // console.log('999999999'+JSON.stringify(res))
                        if(res.errno == 0){
                            this.extra_info = res.data
                            this.status_id = res.data.member_status
                        }else{
                            // 服务器异常
                            widget.toast(res.errmsg)
                        }
                        
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            formatDate(){
                this.attendance_list.forEach((o,i,a)=>{
                    let statusList = o.status
                    let action_log = o.action_log
                    if(o.attendance_id){
                        if(statusList.length==1&&statusList[0].value==1){
                            o.statusClass = 2
                        }else{
                            o.statusClass = 3
                        }
                    }else{
                        if(statusList.length==1&&statusList[0].value==6){
                            o.statusClass = 3
                        }else{
                            o.statusClass = 1
                        }
                    }
                    if(action_log.status&&action_log.status.length){
                        let actionTime = util.getLocalTime(action_log.action_time*1000,'yyyy-MM-dd HH:mm')
                        let text = actionTime + " " + action_log.admin_name + "将"
                        action_log.status.forEach((o,i,a)=>{
                            if(i<action_log.status.length-1){
                                text += o.name + "、"
                            }else{
                                text += o.name + "改为正常"
                            }
                        })
                        o.actionText = text
                    }
                })
            },
            getDate(){
                let data = {
                    team_id: pageDate.team_id,
                    project_id: pageDate.project_id,
                    user_id: pageDate.user_id == 'undefined' ? '' : pageDate.user_id,
                    date: pageDate.date,
                    task_id: this.taskID
                }
                console.log(data)
                commonPage.loadPageStatus('loading')
                util.ajax({ 
                    url: '/attendance/user_attendance_stats',
                    data: data,
                    success: (res) => {
                        // console.log(JSON.stringify(res))
                        // res = JSON.parse(res)
                        commonPage.loadPageStatus('loadSuccess')
                        if(res&&res.errno==0){
                             // this.paramData = res.data.extra_info
                             this.attendance_list = res.data.attendance_list
                             this.formatDate()
                        }else if(res.errno==21015){
                             this.showEmpty = true
                        }else if(res.errmsg){
                             widget.toast(res.errmsg)
                        }else{
                             widget.toast('数据获取失败')
                        }
                    },
                    error: (xhr, status) => {
                         commonPage.loadPageStatus('loadSuccess')
                         widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /**
             * 改为正常按钮
             * @return {[type]} [description]
             */
            resetToNormal(attendance){ 
                 commonPage.loadPageStatus('loading')
                 let statusList = ''
                 attendance.status.forEach((item)=>{
                    statusList += item.value+','
                 })
                 statusList = statusList.substring(0,statusList.length-1)

                 util.ajax({
                    url: '/attendance/attendance_status/update',
                    type:'POST',
                    data: {
                        'team_id':pageDate.team_id,
                        'project_id':pageDate.project_id,
                        'attendance_id':attendance.attendance_id,
                        'status':statusList,
                        'user_id':pageDate.user_id
                    },
                    success: (res) => {
                        console.log(res)
                        commonPage.loadPageStatus('loadSuccess')
                        if(res.errno==0){
                            //更新考勤信息
                            this.getDate()
                        }else if(res.errmsg){
                             widget.toast(res.errmsg)
                        }else{
                           widget.toast('更新失败')
                        }
                    },
                    error: (xhr, error) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
             // 获取权限
            getPermission(){
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/permission/application',
                    data: {
                        team_id: pageDate.team_id,
                        project_id: pageDate.project_id,
                        application_id: 1
                    },
                    success: (res) => {
                        // console.log(res)
                        commonPage.loadPageStatus('loadSuccess')
                        if(res.errno==0){
                           this.permission = res.data
                        }else{
                            widget.toast(res.errmsg)
                        }
                    },
                    error: (xhr, error) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            toPositionMap(id){
                window.location.href="dmsaas://KaoqinPositionMap?urdData="+encodeURIComponent(`task_id=${this.taskID}&attendance_id=${id}`)
            },
            picPreview (index,imgList){
                let list = []
                imgList.forEach((item)=>{
                    list.push(item.url)
                })
                clientUi.bigPicturePreview('预览', list, index)
            },
            /**
             * 跳转成员信息页
             * @return {[type]} [description]
             */
            toProjectMemberDetail(){
                let str = `tid=${pageDate.team_id}&pid=${pageDate.project_id}&gid=${this.extra_info.group_id}&uid=${pageDate.user_id}`
                window.location.href="dmsaas://ProjectMemberDetail?urdData="+encodeURIComponent(str)
            }
        },
        created(){
            this.init()
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/attendance.css"></style>